<template>
	<view>
		<view class="flex" style="padding: 10px 15px">
			<uni-datetime-picker
				return-type="timestamp"
				@change="changeLog"
				type="date"
				placeholder="开始时间"
				:clear-icon="false"
				v-model="single"
			/>
			<view style="margin: 0 7px">-</view>
			<uni-datetime-picker
				return-type="timestamp"
				@change="changeLogs"
				type="date"
				placeholder="结束时间"
				:clear-icon="false"
				v-model="single1"
			/>
			<view @click="shaixuan" style="margin-left: 15px; font-size: 14px; color: #ff3331">筛选</view>
		</view>
		<view class="flex" style="padding: 15px">
			{{ project_info.title }}：
			<uni-data-select v-model="value" :localdata="range" @change="changes"></uni-data-select>
		</view>
		<view class="uni-container" style="padding-bottom: 50px">
			<uni-table
				ref="table"
				:loading="loading"
				border
				stripe
				emptyText="暂无更多数据"
				@selection-change="selectionChange"
			>
				<uni-tr>
					<uni-th width="150" align="center" v-for="(it, i) in tab_list" :key="i">{{ it }}</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in table_list" :key="index">
					<uni-td align="center" v-for="(itt, indx) in item.detail" :key="indx">{{ itt }}</uni-td>
				</uni-tr>
			</uni-table>
			<!-- <view class="uni-pagination-box">
				<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
					@change="change" />
			</view> -->
		</view>
		<view
			@click="download"
			style="width: 100%; box-shadow: 0px -3px 6px 1px #e4ebef; position: fixed; bottom: 0; padding: 5px 0px"
		>
			<view
				class="flex"
				style="
					background-color: #ff3331;
					border-radius: 20px;
					margin: 0px 15px;
					padding: 10px 0;
					font-size: 14px;
					justify-content: center;
					color: #fff;
				"
			>
				可前往浏览器端下载
				<image style="width: 16px; margin-left: 10px" src="/static/img/18.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '../../common/config/index.js';
	export default {
		data() {
			return {
				single: '',
				single1: '',
				value: null,
				range: [
					{
						value: 0,
						text: '全部业务员',
					},
				],
				searchVal: '',
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				project_id: '',
				tab_list: [],
				table_list: [],
				down_url: config.imgurl,
				project_name: '',
				project_info: '',
				apply_phone: '',
				work_end: '',
				work_start: '',
			};
		},
		onLoad(e) {
			this.value = Number(e.applyphone);
			this.apply_phone = e.applyphone;
			this.project_id = e.project_id;
			this.selectedIndexs = [];
			// this.getData(1)
			this.zhiy();
			this.list();
			this.info();
		},
		methods: {
			async zhiy() {
				let res = await this.$http.index.showSubOrderDetail({
					project_id: this.project_id,
				});
				if (res.code == 1) {
					for (let i = 0; i < res.data.list.length; i++) {
						// if (this.apply_phone == res.data.list[i].key) {
						// 	this.value = i + 1
						// }
						let a = {
							value: res.data.list[i].key,
							text: res.data.list[i].value,
						};
						this.range.push(a);
						console.log(this.range);
					}
					// this.range.forEach((res, index) => {
					// 	if (res.value == this.apply_phone) {
					// 		this.value = index
					// 		return
					// 	}
					// })
					this.$forceUpdate();
				}
			},
			shaixuan() {
				this.list();
			},
			changeLog(e) {
				this.work_start = e / 1000;
			},
			changeLogs(e) {
				this.work_end = e / 1000;
			},
			async info() {
				let res = await this.$http.car.projectInfo({
					project_id: this.project_id,
				});
				if (res.code == 1) {
					this.project_info = res.data.project;
				}
			},
			async download() {
				let res = await this.$http.index.orderDetailList({
					project_id: this.project_id,
					apply_phone: this.apply_phone,
					work_start: this.work_start,
					work_end: this.work_end,
					export: 1,
				});
				if (res.code == 1) {
					let url = this.down_url + res.data.path;
					// #ifdef APP
					uni.downloadFile({
						url: url, //仅为示例，并非真实的资源
						success: (res) => {
							if (res.statusCode === 200) {
								console.log('下载成功');
							}
						},
					});
					// plus.runtime.openURL(url)
					// #endif
					// #ifdef H5
					window.location.href = url;
					// #endif
				}
			},
			async list() {
				let res = await this.$http.index.orderDetailList({
					project_id: this.project_id,
					apply_phone: this.apply_phone,
					work_start: this.work_start,
					work_end: this.work_end,
				});
				if (res.code == 1) {
					this.tab_list = res.data.column;
					this.table_list = res.data.list;
				}
			},
			changes(e) {
				this.apply_phone = e;
				this.list();
			},
			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map((i) => this.tableData[i]);
			},
			// 多选
			selectionChange(e) {
				this.selectedIndexs = e.detail.index;
			},
			//批量删除
			delTable() {
				console.log(this.selectedItems());
			},
			// 分页触发
			change(e) {
				this.$refs.table.clearSelection();
				this.selectedIndexs.length = 0;
				this.getData(e.current);
			},
			// 搜索
			search() {
				this.getData(1, this.searchVal);
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true;
				this.pageCurrent = pageCurrent;
				this.request({
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					value: value,
					success: (res) => {
						// console.log('data', res);
						this.tableData = res.data;
						this.total = res.total;
						this.loading = false;
					},
				});
			},
			// 伪request请求
			request(options) {
				// return
				// const {
				// 	pageSize,
				// 	pageCurrent,
				// 	success,
				// 	value
				// } = options
				// let total = tableData.length
				// let data = tableData.filter((item, index) => {
				// 	const idx = index - (pageCurrent - 1) * pageSize
				// 	return idx < pageSize && idx >= 0
				// })
				// if (value) {
				// 	data = []
				// 	tableData.forEach(item => {
				// 		if (item.name.indexOf(value) !== -1) {
				// 			data.push(item)
				// 		}
				// 	})
				// 	total = data.length
				// }
				// setTimeout(() => {
				// 	typeof success === 'function' &&
				// 		success({
				// 			data: data,
				// 			total: total
				// 		})
				// }, 500)
			},
		},
	};
</script>

<style scoped lang="scss">
	.uni-pagination-box {
		margin-top: 15px;
	}

	/deep/ .uni-select__input-text {
		width: 35% !important;
		color: #ff3331 !important;
		font-size: 14px !important;
	}

	/deep/.uni-select__input-placeholder {
		width: 20% !important;
	}

	/deep/ .uniui-bottom {
		font-size: 20px;
		color: #ff3331 !important;
	}

	/deep/.uni-select {
		border: none;
	}

	/deep/ .uni-select__selector {
		width: 50% !important;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	/deep/.uni-table {
		width: 600px !important;
	}

	/deep/.uni-table-th-content {
		display: flex;
		align-items: center;
		flex: 1;
		width: 100px !important;
	}
</style>
